<template>
    <view v-if="showPay">
        <view class="mask"></view>
        <view class="pay-box">
            <view class="pay-title">支付</view>
            <view class="pay-cancel" @tap="close">取消</view>
            <view class="pay-price">￥{{orderData.price}}</view>
            <view>
                <radio-group @change="radioChange">
                    <block v-for="(item, index) in radioGroup" :key="index">
                        <view class="pay-list">
                            <view class="pay-type">
                                <view class="type-img">
                                    <img :src="base_url + '/weixing.png'" alt="" style="width:100%;height:100%">
                                </view>
                                <view class="type-name">{{item.value}}</view>
                            </view>
                            <view class="type-choose">
                            <!-- <view class="type-choose" @tap="chooseItem(item, index)">
                                <img :src="item.iconChoosed" alt="" style="width:100%;height:100%" v-if="item.choosed == true">
                                <img :src="item.iconNoChoosed" alt="" style="width:100%;height:100%" v-if="item.choosed == false"> -->
                                <radio :value="item.value" style="transform:scale(0.9)" :checked="index === current" color="#24C79C"/>
                            </view>
                        </view>
                    </block>
                </radio-group>
            </view>
            <view class="pay-button" @tap="confirmPay">确认</view>
        </view>    
    </view>    
</template>

<script>
import { config } from '../../common/utils/congfig'
import { OrderModel } from '../../model/order'
const orderModel = new OrderModel()
export default {
    // props: {
    //     showPay:{
    //         type : Boolean,
    //         default : false
    //     },
    //     orderData: {
    //         type: String,
    //         default: false
    //     }
    // },
    props: ['showPay', 'orderData'],
    data() {
        return {
            base_url: config.img_base_url,
            radioGroup: [
                {
                    id: 1,
                    value: '微信支付'
                },
                // {
                //     id: 2,
                //     value: '支付宝支付'
                // }
            ],
            payType: '微信支付',
            paymentData: {},
            current: 0
        }
    },
    onShow() {
        this.radioGroup.forEach((item) => {
            if(item.choosed == true) {
                this.payType = item.value
                console.log(this.payType)
            }
        })
    },
    methods: {
        // chooseItem(item, index) {
        //     if(item.choosed == true) {
        //         // this.radioGroup[index + 1] = true
        //         // this.radioGroup[index] = false
        //         item.choosed = true;
        //         let arr = this.radioGroup.filter((value) => {
        //             return value.id != item.id
        //         })
        //         arr.forEach((item) => {
        //             item.choosed = false
        //         })
        //     }
        //     if(item.choosed == false) {
        //         item.choosed = true;
        //         let arr = this.radioGroup.filter((value) => {
        //             return value.id != item.id
        //         })
        //         arr.forEach((item) => {
        //             item.choosed = false
        //         })
        //     }
        //     this.payType = item.value
        //     console.log(this.payType)
        // },
        radioChange(e) {
            console.log(e)
            for (let i = 0; i < this.radioGroup.length; i++) {
                if (this.radioGroup[i].value === e.target.value) {
                    this.current = i;
                    this.payType = e.detail.value
                    break;
                }
            }
        },
        close() {
            this.$emit('close', this.payType);
            if(this.orderData.commidty_type == 0) {
                uni.redirectTo({
                    url: '/pagesC/order-true/order-true?orderStatus=1'
                })
            }else if(this.orderData.commidty_type == 1) {
                uni.redirectTo({
                    url: '/pagesC/order-virtual/order-virtual?orderStatus=1'
                })
            }else if(this.orderData.commidty_type == 2) {
                uni.redirectTo({
                    url: '/pagesC/order-group/order-group?orderStatus=1'
                })
            }
        },
        confirmPay() {
            let that = this
            if(this.payType == '') {
                uni.showToast({
                    title: '未选择支付方式',
                    icon: 'none'
                })
            }else {
                if(this.orderData.type == 1 || this.orderData.type == 3) {
                    this.paymentData = { order_id: this.orderData.order_id }
                }else if(this.orderData.type == 2) {
                    this.paymentData = { internal_payment_sn: this.orderData.internal_payment_sn }
                }
                orderModel.orderWechatPayment(this.paymentData).then((res) => {
                    if(res.code == 200) {
                        console.log(JSON.parse(res.data))
                        let payInfo = JSON.parse(res.data)
                        uni.getProvider({
                            service: 'payment',
                            success: (res1) => {
                                uni.requestPayment({
                                    provider: res1.provider[0],
                                    timeStamp: payInfo.timeStamp,
                                    nonceStr: payInfo.nonceStr,
                                    package: payInfo.package,
                                    signType: payInfo.signType,
                                    paySign: payInfo.paySign,
                                    success: (res2) => {
                                        console.log(res2);
                                        // this.showPay = false
                                        uni.showToast({
                                            title: '支付成功',
                                            icon: 'success',
                                            success: () => {
                                                if(that.orderData.commidty_type == 0) {
                                                    uni.redirectTo({
                                                        url: '/pagesC/order-true/order-true?orderStatus=2'
                                                    })
                                                }else if(that.orderData.commidty_type == 1) {
                                                    uni.redirectTo({
                                                        url: '/pagesC/order-virtual/order-virtual?orderStatus=3'
                                                    })
                                                }else if(that.orderData.commidty_type == 2) {
                                                    uni.redirectTo({
                                                        url: '/pagesC/order-group/order-group?orderStatus=2'
                                                    })
                                                }
                                            }
                                        })
                                    },
                                    fail: function (err) {
                                        console.log('fail:' + JSON.stringify(err));
                                        if(that.orderData.commidty_type == 0) {
                                            uni.redirectTo({
                                                url: '/pagesC/order-true/order-true?orderStatus=1'
                                            })
                                        }else if(that.orderData.commidty_type == 1) {
                                            uni.redirectTo({
                                                url: '/pagesC/order-virtual/order-virtual?orderStatus=1'
                                            })
                                        }else if(that.orderData.commidty_type == 2) {
                                            uni.redirectTo({
                                                url: '/pagesC/order-group/order-group?orderStatus=1'
                                            })
                                        }
                                    }
                                })
                            }
                        })
                    }
                })
            }
        }
    }
}
</script>

<style scoped>
    .mask {
        position: fixed;
        top: 0rpx;
        bottom: 0rpx;
        left: 0rpx;
        right: 0rpx;
        background:rgba(0,0,0,1);
        opacity: 0.3;
        z-index: 99;
    }
    .pay-box {
        position: fixed;
        bottom: 0rpx;
        width: 100%;
        height: 557rpx;
        background: #ffffff;
        z-index: 999;
    }
    .pay-title {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
        text-align: center;
        padding-top: 45rpx;
    }
    .pay-cancel {
        position: absolute;
        top: 50rpx;
        right: 47rpx;
        color: #333333;
        font-size: 30rpx;
    }
    .pay-price {
        padding: 40rpx 0 30rpx 0;
        color: #FF4949;
        font-size: 72rpx;
        text-align: center;
        border-bottom: 1rpx solid #F0F0F0;
    }
    .pay-list {
        display: flex;
        justify-content: space-between;
        padding: 41rpx 44rpx 0 58rpx;
    }
    .type-img {
        width: 38rpx;
        height: 38rpx;
        margin-right: 24rpx;
    }
    .pay-type {
        display: flex;
        justify-content: left;
    }
    .type-name {
        color: #333333;
        font-size: 32rpx;
        font-weight: 500;
    }
    .type-choose {
        width: 41rpx;
        height: 41rpx;
    }
    radio .wx-radio-input{
        border: 1rpx solid #24C79C;
    }
    radio .wx-radio-input.wx-radio-input-checked{
        background: #ffffff;
    }
    radio .wx-radio-input.wx-radio-input-checked::before{
        border-radius: 50%;/* 圆角 */
        color:#24C79C; /* 对勾颜色 白色 */
        /* border: 1rpx solid #24C79C; */
        background: #ffffff;
        transform:translate(-50%, -50%) scale(1);
        -webkit-transform:translate(-50%, -50%) scale(1);
    }
    .pay-button {
        position: absolute;
        bottom: 28rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 473rpx;
        height: 84rpx;
        background:rgba(36,199,156,1);
        border-radius: 42rpx;
        margin: 110rpx auto 0;
        color: #ffffff;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        line-height: 84rpx;
    }
</style>